import React, { Component, Fragment } from 'react'
// import { Icon } from 'antd';
import { withRouter } from 'react-router-dom'

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_pwcm5lc8adt.js',
// });

class MyInfoSider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            mouseIndex: null,
        }
    }

    handleMouseOver = (index) => {
        this.setState({
            mouseIndex: index
        });
    }

    handleMouseOut = () => {
        this.setState({
            mouseIndex: this.props.siderIndex
        });
    }

    handleIndex = (typeName) => { // 渲染侧边栏的数据
        return (
            <span
                className={`anticon-portal ${typeName}`}
                style={{
                    marginRight: 20,
                    fontSize: 30,
                    marginLeft: 30
                }}
            ></span>)
    }

    handleClick = (index) => {
        switch (index) {
            case 0:
                this.props.history.push(`/my/info`);
                break;
            case 1:
                this.props.history.push(`/my/message`);
                break;
            default:
                break;
        }
    }

    render() {
        return (
            <Fragment>
                {
                    this.props.siderData.map((item, index) => {
                        var temp;
                        switch (index) {
                            case 0:
                                temp = this.handleIndex("anticonart2");
                                break;
                            case 1:
                                temp = this.handleIndex("anticonwodexiaoxi");
                                break;
                            default:
                        }
                        return (
                            <div
                                key={index}
                                style={{
                                    backgroundColor: (this.state.mouseIndex === index || this.props.siderIndex === index ? '#00CCFF' : '#fff'),
                                    height: 60,
                                    lineHeight: '60px',
                                    cursor: 'pointer',
                                    borderTopLeftRadius: (index === 0 ? 5 : 0),
                                    borderTopRightRadius: (index === 0 ? 5 : 0),
                                    borderBottomLeftRadius: (index === 0 ? 0 : 5),
                                    borderBottomRightRadius: (index === 0 ? 0 : 5)
                                }}
                                onMouseOver={() => this.handleMouseOver(index)}
                                onMouseOut={this.handleMouseOut}
                                onClick={() => this.handleClick(index)}
                            >
                                {temp}
                                <span style={{
                                    fontSize: 20
                                }}>{item}</span>
                            </div>
                        );
                    })
                }
            </Fragment>
        )
    }
}

export default withRouter(MyInfoSider);